import React from 'react';
import { useState, useEffect } from 'react'
import type { FC } from 'react';
import './index.css'
import { Image } from 'antd-mobile'
import HomeHeader from '../../compontent/header'
import { useNavigate } from 'react-router-dom'
import request from '../../api/axios'
import video from '../../../public/Icon/video_n.png'
import home from '../../../public/Icon/home_s.png'
import editIcon from '../../../public/Icon/patient_support_group_issue.png'
const Patient: FC = ({ }) => {
  const navigate = useNavigate()
  const [department, setDepartment] = useState<any[]>([]);
  const [activeDepartmentId, setActiveDepartmentId] = useState<string | number | null>(null);
  const [patient, setPatient] = useState<any[]>([]);

  // 时间格式化函数
  const formatDateTime = (dateTime: string) => {
    if (!dateTime) return { date: '', time: '' };
    const date = new Date(dateTime);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');

    return {
      date: `${year}-${month}-${day}`,
      time: `${hours}:${minutes}`
    };
  };

  const getData = async () => {
    const departmentData = await request.get("/api/health/share/knowledgeBase/v1/findDepartment")
    const departments = departmentData?.data?.result || []
    setDepartment(departments)
    // 设置第一个部门为默认激活
    if (departments.length > 0) {
      setActiveDepartmentId(departments[0].id)
    }
  }
  useEffect(() => {
    getData()
  }, []);
  const getPatient = async () => {
    const data = await request.get(`/api/health/user/sickCircle/v1/findSickCircleList?departmentId=${activeDepartmentId}&page=1&count=10`)
    setPatient(data?.data?.result || [])
  }
  useEffect(() => {
    getPatient()
  }, [activeDepartmentId])

  return (
    <div className="patient">
      <header className="patient-header">
        <HomeHeader type={"病友圈"}></HomeHeader>
      </header>
      <div className="patient-main">
        <div className="patient-main-title">
          <div className="patient-department-scroll">
            {department.map((item, index) => (
              <div
                key={item.id || index}
                className={`patient-department-item ${item.id === activeDepartmentId ? 'active' : ''}`}
                onClick={() => {
                  setActiveDepartmentId(item.id);
                }}
              >
                <div className="patient-department-name">{item.departmentName}</div>
              </div>
            ))}
          </div>
        </div>
        <div className="patient-main-patient">
          {patient.map((item, index) => (
            <div
              key={item.id || index}
              className="patient-card"
              onClick={() => navigate(`/patientDetail?id=${item.sickCircleId}`)}
            >
              <div className="patient-card-header">
                <div className="patient-card-title">{item.title}</div>
                <div className="patient-card-time">
                  <div className="patient-card-date">{formatDateTime(item.releaseTime).date}</div>
                </div>
              </div>
              <div className="patient-card-content">
                <div className="patient-card-author">{item.detail}</div>
                {item.badge && (
                  <div className="patient-card-badge">{item.badge}</div>
                )}
              </div>
              <div className="patient-card-footer">
                <div className="patient-card-stats">
                  <span className="patient-card-collect">收藏 {item.collectionNum || 0}</span>
                  <span className="patient-card-suggest">建议 {item.commentNum || 0}</span>
                </div>
              </div>
            </div>
          ))}

        </div>
      </div>
      <footer className="patient-footer">
        <div className="tab" onClick={() => navigate('/')}>
          <div className="tab-icon" style={{ textAlign: "center" }}><Image src={home} width={24} height={24}></Image></div>
          <div className="tab-label">首页</div>
        </div>
        <div className="center-btn" onClick={() => navigate('/task')}>
          <div className="center-inner"><Image src={editIcon}></Image></div>
        </div>
        <div className="tab" onClick={() => navigate('/my')}>
          <div className="tab-icon" style={{ textAlign: "center" }}><Image src={video} width={24} height={24}></Image></div>
          <div className="tab-label">视频</div>
        </div>
      </footer>
    </div>
  );
};
export default Patient;